<template>
  <el-form :inline="true" :model="searchFormData">
    <el-form-item>
      <el-autocomplete
        v-model="searchFormData.cityName"
        placeholder="切换城市"
        value-key="name"
        :fetch-suggestions="querySearch"
        @select="handleCitySelect"
      />
      <!-- <el-input placeholder="目的地" suffix-icon="el-icon-search" v-model="searchFormData.city"/> -->
    </el-form-item>

    <el-date-picker
      v-model="daterange"
      :editable="false"
      :clearable="false"
      value-format="yyyy-MM-dd"
      type="daterange"
      range-separator="-"
      start-placeholder="入住日期"
      end-placeholder="离店日期"
      @change="onDateChange"
      :picker-options="pickerOptions"
    />

    <el-form-item>
      <memberSelector
        :adultMemberList="adultMemberList"
        :childMemberList="childMemberList"
        :onChange="onMemeberChange"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleonSubmit">查看价格</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import memberSelector from './memberSelector'

  function range(start, to) {
    const r = []
    for (let i = start; i < to; i++) {
      r.push(i)
    }
    return r
  }

  export default {
    props: ['onChange', 'defaultValue'],

    data() {
      const {
        city,
        cityName,
        enterTime,
        leftTime,
        adultCount,
        childCount
      } = this.defaultValue
      const daterange = [enterTime, leftTime].filter(v => !!v)
      return {
        cityList: [],
        adultMemberList: range(1, 8),
        childMemberList: range(0, 5),
        daterange,
        searchFormData: {
          cityName,
          city,
          enterTime,
          leftTime,
          adultCount,
          childCount,
        },
        // 日期可选配置
        pickerOptions: {
            // 如果返回true表示可选
            disabledDate(time) {
                return time.getTime() + 3600 * 1000 * 24 < Date.now();
            },
        }
      }
    },

    methods: {
      onSubmit: function () {
        this.onChange(this.searchFormData)
         // 提交表单是触发
        
      },
      handleonSubmit(){
      if(!this.searchFormData.cityName){
                this.$message.error("请输入出发城市");
                return;
            }

            if(!this.searchFormData.adultCount){
                this.$message.error("请输入成人数");
                return;
            }

            

          //   // 把this.form保存到store中
          //   this.$store.commit("air/setHistory", this.form)

          //   // 跳转到 /air/flights，保证该页面url的参数有5个参数
          //   this.$router.push({
          //      path: "/hotel/index",
          //      // query是url的参数
          //      query: this.form
          //   })
          },
      async querySearch(queryString, cb) {
        if (!queryString) {
          return cb([])
        }
        const res = await this.$axios({url: '/cities', params: {name: queryString}})
        const {data} = res.data
        var results = data.filter(this.createFilter(queryString));
        // 调用 callback 返回建议列表的数据
        cb(results);
      },

      createFilter(queryString) {
        return (city) => {
          return (city.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },

      handleCitySelect(c) {
        // 城市 id
        this.searchFormData.city = c.id
        // 回调
        this.onChange(this.searchFormData)
      },

      onMemeberChange ([adultCount, childCount]) {
        this.searchFormData.adultCount = adultCount
        this.searchFormData.childCount = childCount
      },

      onDateChange ([enterTime, leftTime]) {
        this.searchFormData.enterTime = enterTime
        this.searchFormData.leftTime = leftTime
      }

      
    },

    components: {
      memberSelector,
    }
  }
</script>

<style scoped lang="less">

</style>
